<template>
  <div>
    <el-tabs tab-position="left" style="height: 200px" >
      <el-form size="large" inline>
        <el-tab-pane v-for="item in attrGroupList" :label="item.groupName" :key="item.id" >
          <div v-for="attr in item.attrList" :key="attr.id">
            <el-form-item :label="attr.attrName">
              <el-select
                  v-model="attr.attrValues"
                  multiple
                  filterable
                  allow-create
                  placeholder="请输入规格参数值">
                <!-- TODO 此处可以获取属性可选列表，然后再遍历-->
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="是否快速显示">
              <el-switch v-model="attr.quickShow" inactive-text="否" active-text="是" inactive-value="1"
                         active-value="0"/>
            </el-form-item>
          </div>
        </el-tab-pane>
      </el-form>
    </el-tabs>
  </div>
  <div class="foot_class">
    <el-row :gutter="20">
      <el-col :span="3" :offset="6">
        <div>
          <el-button type="primary" @click="last">上一步</el-button>
        </div>
      </el-col>
      <el-col :span="3" :offset="4">
        <div>
          <el-button type="success" @click="next">下一步:设置销售属性</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {ref, defineProps, onMounted, defineEmits} from "vue";

const emits = defineEmits(['pushAttrValueFromData', 'back'])
let attrGroupList = ref([])
const propsData = defineProps({
  AttrGroupList: Array
})
onMounted(()=>{
  attrGroupList.value=propsData.AttrGroupList
})

function last() {
  /*返回上一步*/
  emits('back')
}

function next() {
  /*遍历生成规格参数值*/
/*  let attrValueData = attrGroupList.value.map(item => {
    if (Array.isArray(item.attrList)) {
      return item.attrList.map(attr => {
        return {
          attrId: attr.id,
          attrName: attr.attrName,
          attrValues: attr.attrValues,
          quickShow: attr.quickShow
        }
      })
    }
  })*/
  console.log("子组件2要提交的数据", attrGroupList.value)
  emits('pushAttrValueFromData', attrGroupList.value)
}
</script>
<style scoped>

</style>
